<template>
  <div>
    <!-- nav-bar
      this.$router.push() : 路由跳转
      this.$router.back() : 路由后退  ===== 页面中的后退按钮
    -->
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      v-model.trim="keyword"
      show-action
      @input="hInput"
      placeholder="请输入搜索关键词"
    >
      <!-- #action  ==== slot="action" -->
      <!-- <template slot="action">
        <div>搜索</div>
      </template> -->
      <div slot="action" @click="hSearch">搜索</div>
    </van-search>

    <!-- 2. 搜索建议 -->
    <van-cell-group>
      <van-cell
        v-for="(item, index) in cSuggestions"
        :key="index"
        icon="search"
        @click="hClickSuggetion(index)"
      >
        <div v-html="item"></div>
      </van-cell>
      <!-- <van-cell title="单元格" icon="search" />
      <van-cell title="单元格" icon="search" /> -->
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group>
      <van-cell title="历史记录" />

      <van-cell
        :title="item"
        v-for="(item, index) in historys"
        :key="index"
        @click="$router.push('/search/result?keyword=' + item)"
      >
        <van-icon name="close" @click.stop="delHistory(index)"></van-icon>
      </van-cell>
      <!--
      <van-cell title="单元格">
        <van-icon name="close"></van-icon>
      </van-cell> -->
    </van-cell-group>
  </div>
</template>

<script>
import { setHistory, getHistory } from '@/utils/storageHistory.js'
import { getSuggestion } from '@/api/search.js'
export default {
  name: 'Search',
  data () {
    return {
      timer: null,
      startTime: 0,
      keyword: '',
      suggestions: [],
      historys: getHistory() || [],
      str: '<span style="color:red">abc</span>'
    }
  },
  methods: {
    delHistory (index) {
      this.historys.splice(index, 1)
      setHistory(this.historys)
    },
    hClickSuggetion (index) {
      const keyword = this.suggestions[index]
      this.addHistory(keyword)
      // 页面跳转
      this.$router.push('/search/result?keyword=' + keyword)
    },
    hSearch () {
      if (this.keyword) {
        // 添加历史记录
        this.addHistory(this.keyword)
        this.$router.push('/search/result?keyword=' + this.keyword)
      }
    },
    addHistory (keyword) {
      // this.historys.push(str)
      const index = this.historys.findIndex(item => item === keyword)

      // if (index > -1) {
      //   this.historys.splice(index, 1)
      //   this.historys.unshift(str)
      // }
      index !== -1 && this.historys.splice(index, 1)
      // 在头部添加
      this.historys.unshift(keyword)
      console.log(this.historys)
      // 持久化历史记录
      setHistory(this.historys)
    },

    hInput () {
      const dt = Date.now() // 获取当前时间戳 ms为单位
      if (dt - this.startTime > 500) {
        this.doAjax()
        this.startTime = dt
      } else {
        console.log('当前的时间戳是', dt, '距离上一次执行不够500ms,所以不执行')
      }
    },
    async doAjax () {
      if (this.keyword === '') {
        this.suggestions = []
        return
      }

      try {
        const res = await getSuggestion(this.keyword)
        // console.log(res)
        this.suggestions = res.data.data.options
      } catch (err) {
        console.log(err)
      }
    }
  },
  computed: {
    cSuggestions () {
      const reg = RegExp(this.keyword, 'ig')
      return this.suggestions.map(sug => sug.replace(reg, val => '<span style="color:red">' + val + '</span>'))
    }
  }
}
</script>

